﻿HTML CSS 基础

1. 一个简单的HTML网页
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html

2. html标签
<p>				- 段落
<h1 ~ h6> 		- 标题
<em><strong> 	- 强调， em为斜体，strong为粗体
<span>			- 为文字单独设置样式用
<q>				- 短文本引用，会对文字加双引号
<blockquote>	- 长文本引用
<br/>			- 换行
&nbsp;			- 空格
<hr/>			- 水平横线
<address>		- 地址信息， 显示为斜体
<code>			- 单行代码标注
<pre>			- 多行代码标注， 保留文本中的换行和空格
<ul><li>		- 信息列表
<ol><li>		- 有序列表
<div>			- 层，相当于容器，用与将同一部分放到一起，用于排版， 设置id属性给div命名使逻辑清晰
<table>			- 表格，属性summary：表格摘要，不会在浏览器显示，用于怎加表格可读性
<tbody>			- 表格内容多是，表格会下载一点显示一点，加上tbody标签后，表格内容需要全部下载完才显示
<tr>			- 行
<th>			- 表头，跟td类似，显示为加粗居中
<td>			- 列单元格
<caption>		- 表格标题，显示在表格上方
<a>				- 超链接，属性href：链接地址，title：设置鼠标滑过时显示的文本，也方便搜索引擎了解地址内容，target="_blank"：a标签默认在当前窗口打开连接，如果需要在新窗口打开设置target,href="mailto:xxx"： 发送邮件，还有其它参数可以设置cc,bcc, subject, body 
<img>			- 图片，属性src：设置图片位置，alt：图片下载不成功时显示的文本，title：鼠标滑过时显示的文本，图片可以是gif，png，jpg格式
<form>			- 表单，属性method：提交方式有get和post，action：提交给服务器那个文件处理
<input>			- 表单控件，属性type：控件类型，text=文本输入框，password=密码输入框，radio=单选框，checkbox=复选框，submit：提交按钮，reset：重置按钮。name：命名,单选和复选name要设置一样。value：控件默认值。checked：选项被选中。
<textarea>		- 文本域，属性rows：行数。cols：列数。标签之间可以设置默认值
<select>		- 下拉列表框，属性multiple：多选
<option>		- 下拉列表框选项，属性value：向服务器提交的值。selected：选中选项。option标签之间的值为显示的值
<label>			- 属性for：值与控件id属性值相同，label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）

3. css样式
<p style="color:red">test</p>	内嵌式
<style type="text/css">			嵌入式
p{						/*标签选择器*/	
	font-size:20px;		/*设置文字字号*/
	color:red;			/*设置文字颜色*/
	font-weight:bold;	/*设置字体加粗*/
}
</style>
<link href="base.css" rel="stylesheet" type="text/css" /> 外部式
3种方式优先级 内联式 > 嵌入式 > 外部式

<span class="stress">胆小如鼠</span>
.stress{color:red;}/*类选择器*/

<span id="setGreen">公开课</span>
#setGreen{color:green;}/*ID选择器*/

<span class="stress bigsize">三年级</span>
.stress{color:red;}
.bigsize{font-size:25px;}/*类选择器可以这么用，ID选择器不可以*/

.food>li{border:1px solid red;}/*子元素选择器*/
.first  span{color:red;}/*包含选择器*/
总结：>作用于元素的第一代后代，空格作用于元素的所有后代

* {color:red;}/*通用选择器*/

a:hover{color:red;}/*伪类选择符，鼠标滑过的状态来设置字体颜色*/

h1,span{color:red;}/*分组选择符*/

CSS的某些样式是具有继承性的，如下面设置p字体为红色，p里面的标签span的字体也会为红色
p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

特殊性、浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

p{color:red!important;} /*权值最高*/

字体，微软雅黑
body{font-family:"Microsoft Yahei";}
字号、颜色
body{font-size:12px;color:#666}
粗体
span{font-weight:bold;}
斜体
a{font-style:italic;}
下划线
p{text-decoration:underline;}
删除线
.oldPrice{text-decoration:line-through;}
缩进，2em的意思就是文字的2倍大小
p{text-indent:2em;}
行间距（行高）
p{line-height:1.5em;}
文字间隔、字母间隔设置
h1{letter-spacing:50px;}
单词间距设置
h1{word-spacing:50px;}
对齐
div{text-align:center;}

元素分类
块状元素、内联元素(又叫行内元素)和内联块状元素
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>

块级元素
a{display:block;}将内联元素a转换为块状元素，从而使a元素具有块状元素特点
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素
display:inline将元素设置为内联元素
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素
display:inline-block就是将元素设置为内联块状元素
inline-block元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒模型-边框border
设置div的边框线宽度，实线，红色
div{
    border:2px  solid  red;
}
等于
div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
设置下边框宽度，实线，红色
div{border-bottom:1px solid red;}

盒模型-宽度和高度width，height
元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
块状元素有一个特点之一：在不设置宽度的情况下，显示为父容器的100%
width:200px;height:30px;

盒模型-填充padding
元素内容与边框之间是可以设置距离的，称之为“填充”
div{padding:20px 10px 15px 30px;}
等于
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}

盒模型-边界margin
div{margin:20px 10px 15px 30px;}

css布局模型
布局模型与盒模型一样都是 CSS 最基本、 最核心的概念
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float
1、流动模型（Flow）
默认的网页布局模式
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

2、浮动模型 (Float)
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}

3、层模型（Layer）
1、绝对定位(position: absolute)
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}

2、相对定位(position: relative)
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动

3、固定定位(position: fixed)
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

Relative与Absolute组合使用
<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
#box1{
    width:200px;
    height:200px;
    position:relative;        
}
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

颜色值
p{color:red;}
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
p{color:#00ffff;}

长度值
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px

3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）

水平居中设置-行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的

水平居中设置-定宽块状元素
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    width:500px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

水平居中总结-不定宽块状元素方法
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：
加入 table 标签
设置 display;inline 方法
设置 position:relative 和 left:50%;

垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的
.container{
    height:100px;
    line-height:100px;
    background:#999;
}

垂直居中-父元素高度确定的多行文本
1使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle
2在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}

隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute
float : left 或 float:right
